<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
				/*去掉li标签前面的点*/
				list-style: none;
				
			}
			/*让块标签可以在一行显示的方法:*/
			/*1.display:inline;
			2.display:inline-block;
			3.浮动
			*/
			
			ul{
				width:600px;
				/*height:32px;*/
				border:1px solid red;
				/*浮动后还站着位置 不会让后边的元素上来 橡皮筋的那个例子*/
				overflow: hidden;
				margin:0 auto;
			}
			ul li{
				/*向左浮动*/
				float:left;
				/*向右浮动*/
				/*float:right;*/
				width:80px;
				height:32px;
				line-height: 32px;
				text-align: center;
				border-right: 1px solid red;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="">首页</a></li>
			<li><a href="">体育</a></li>
			<li><a href="">新闻</a></li>
			<li><a href="">娱乐</a></li>
		</ul>
		<span>123</span>
	</body>
</html>
